tags: 2021鐵人賽 React

本篇要將call api的功能獨立成一個元件，在架構上會更清楚的分工不同檔案的功能，之後也有可能是其他元件會呼叫api的功能，因此獨立出來會比較方便。

新增call api元件

如下程式碼，將原本在Card.js內call api獲取資料的那段分離出來，另外寫在一個檔案。

src/components/Charts/fredAPI.js

const useFredAPI = (series_id) => {
  return fetch(`${process.env.REACT_APP_PROXY_SERVER_URL}/series/observations?series_id=${series_id}&api_key=${process.env.REACT_APP_API_KEY}&file_type=json`, {
    headers: {
      'Target-URL': 'https://api.stlouisfed.org/fred'
    }
  })
    .then((response) => response.json())
    .then((data) => {
      let seriesData = [];
      data.observations.forEach(ob => {
        seriesData.push([new Date(ob.date).getTime(), Number(ob.value)]);
      });
      return seriesData;
    })
};

export default useFredAPI;

引入call api元件

src/components/Charts/Card.js

import styles from './Card.module.css';
import Highcharts from 'highcharts/highstock';
import HighchartsReact from 'highcharts-react-official';
// import api呼叫元件
import fredAPI from './fredAPI';

const Card = (props) => {
  const [chartOption, setChartOption] = useState({
    ...
  });
  
  // 使用async await，確保等待非同步的call api函數獲取到資料後才進行state update
  const fetchData = useCallback(async (series_id) => {
    try {
      const seriesData = await fredAPI(series_id);
      setChartOption((prevOption) => {
        return {
          ...prevOption,
          series: [
            {
              name: prevOption.series[0].name,
              data: seriesData
            }
          ]
        }
      })
    } catch (error) {
      console.log(error)
    }
  }, []);

  useEffect(() => {
    fetchData(props.item.series_id);
  }, [fetchData, props]);

  return (
    ...
  )
}

export default Card;

小結

上述程式碼將call api功能分離之後，看起來有比較乾淨一些，主要把資料處理的流程搬移，就可以很快速地看出整個程式的架構，就是定義state，定義update state的方式，定義effect，回傳JSX。

接下來幾篇，就開始做下拉式選單功能，就是依照類別去篩選要呈現的圖表，以及分頁功能，當同一頁的圖表超過3個的時候，就可以點下一頁去看更多圖表。